<template>
	<view >
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#007aff" class="topTab"></uni-segmented-control>
				<view>
					<view v-if="current === 0&&isShow"  class="content">
						<view class="code">
							<text >{{codeTitle}}</text>
						</view>
						<uni-grid :column="2" :highlight="false" class="grid">
								<uni-grid-item v-for="(item, index) in codes" :index="index" :key="index">
									<view class="grid-item-box" style="background-color: #fff;">
										<image :src="imageUrl+item.code+'.webp'" class="image" mode="aspectFit" @error="onImageError($event,index)"/>
									</view>
									<text class="text">{{item.des}}</text>
								</uni-grid-item>
						</uni-grid>
					</view>
					<view v-if="current === 1&&isShow"  class="content">
						<view class="code">
							<text >{{edgeCodeTitle}}</text>
						</view>
						<uni-grid :column="2" :highlight="false" class="grid">
								<uni-grid-item v-for="(item, index) in edgeCodes" :index="index" :key="index">
									<view class="grid-item-box" style="background-color: #fff;">
										<image :src="imageUrl+item.code+'.webp'" class="image" mode="aspectFit" @error="onImageErrorE($event,index)"/>
									</view>
									<text class="text">{{item.des}}</text>
								</uni-grid-item>
						</uni-grid>
						
					</view>
					
					<view v-if="current === 2&&isShow" >
						<view class="all">
							<text >{{codeTitle}}</text>
							<text >{{edgeCodeTitle}}</text>	
						</view>
						
					</view>
					
				</view>
				
				
				<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
					direction="horizontal" @trigger="trigger" />
				<uniDrawerVue ref="showRight" mode="right" :mask-click="false">
					<view>
						<view class="close">
							<button @click="closeDrawer()"><text class="word-btn-white">关闭</text></button>
						</view>
						<view class="info-content">
							<text style="color: blue;">答对3道算术题才能填写编码</text>
							<view>
								<view class="question">
									{{question[0].nums[0]}}x{{question[0].nums[1]}}+{{question[0].nums[2]}}=
									<input v-model="answer1" placeholder="请填写正确答案" type="number" />
								</view>
								
								<view class="question">
									{{question[1].nums[0]}}+{{question[1].nums[1]}}x{{question[1].nums[2]}}=
									<input v-model="answer2"placeholder="请填写正确答案" type="number"/>
								</view>
								<view class="question">
									{{question[2].nums[0]}}+{{question[2].nums[1]}}+{{question[2].nums[2]}}=
									<input v-model="answer3" placeholder="请填写正确答案" type="number"/>
								</view>
								<view class="error" v-if="showError">
									<text>算术题不正确，请检查</text>
								</view>
								
								<button @click="checkNum">检验答案</button>
								
							</view>
							<input v-if="current==0||current==2" v-model="inputCodes" @input="toUpper" placeholder="请输入记忆的编码..." class="inputCodes" maxlength="30" :disabled="isDisable"></input> 
							<view style="height: 20rpx;" v-if="current==2"></view>
							<input v-if="current==1||current==2" v-model="inputECodes" @input="toUpper2" placeholder="请输入记忆的编码..." class="inputCodes" maxlength="30" :disabled="isDisable"></input> 
							
							<button @click="submit" style="margin-top: 20rpx;" :disabled="isDisable">提交编码</button>
						</view>
					</view>
				</uniDrawerVue>	
	</view>
</template>

<script>
	import constant from '../../utils/constant.js';
	import min2phase from '../../utils/min2phase';
	import cube from '../../utils/cube';
	import dic from '../../utils/dic.js';
	import uniDrawerVue from '../../components/uni-drawer/components/uni-drawer/uni-drawer.vue'
	export default {
		components: {
			uniDrawerVue
		},
		data() {
			return {
				bufferIndex_C:1,
				bufferIndex_E:2,
				cornerIsKeep:true,
				edgeIsKeep:true,
				cornerLend:[],
				edgeLend:[],
				cornerS:[],
				edgeS:[],
				items: ['角块记忆', '棱块记忆','全记'],
				current: 0,
				inputCodes:"",
				inputECodes:"",
				firstTime:new Date().getTime(),
				codes:[],
				edgeCodes:[],
				isShow:true,
				isDisable:true,
				codeTitle:"",
				edgeCodeTitle:"",
				imageUrl:constant.getImageUrl(),
				pattern: {
					color: '#1296db',
					backgroundColor: '#fff',
					selectedColor: '#1296db',
					buttonColor: '#1296db',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/input.png',
						// selectedIconPath: '/static/image-active.png',
						text: '填写',
						active: false
					},
					{
						iconPath: '/static/create.png',
						// selectedIconPath: '/static/home-active.png',
						text: '生成',
						active: false
					}
				],
				question:[
					{"nums":[8,7,5],"answer":61},
					{"nums":[6,8,9],"answer":78},
					{"nums":[12,7,5],"answer":24}
				],
				answer1:"",
				answer2:"",
				answer3:"",
				showError:false
			};
		},
		onLoad() {
			const updateManager = uni.getUpdateManager();
			
			updateManager.onCheckForUpdate(function (res) {
			  // 请求完新版本信息的回调
			  console.log(res.hasUpdate);
			});
			
			updateManager.onUpdateReady(function (res) {
			  uni.showModal({
			    title: '更新提示',
			    content: '新版本已经准备好，是否重启应用？',
			    success(res) {
			      if (res.confirm) {
			        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
			        updateManager.applyUpdate();
			      }
			    }
			  });
			
			});
			
			updateManager.onUpdateFailed(function (res) {
			  // 新的版本下载失败
			});

			
			
			
			this.update();
			this.read();
			this.firstTime = new Date().getTime();
			this.createNumQuestion();
			uni.$on('update',() =>{
				this.update();
				this.read();
			});
			
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods:{
			read(){
				var scramble = min2phase.get3BlDScramble();
				var cs = Array.from(this.cornerS);
				var es = Array.from(this.edgeS);
				var lc = Array.from(this.cornerLend);
				var le = Array.from(this.edgeLend);
				var res = cube.readCode(scramble,cs,es,this.bufferIndex_C,this.bufferIndex_E,this.cornerIsKeep,this.edgeIsKeep,lc,le);
				this.handleCodeArrays(res);
			},
			handleCodeArrays(res){
				this.codes=[];
				this.edgeCodes=[];
				// this.edgeCodes
				var cornerCodes=res[1];
				var edgeCodes=res[3];
				var c = "";
				var e = "";
				for(var i = 0;i<cornerCodes.length;i++){
					var cc = cornerCodes[i].code;
					c+=cc;
					if(i%2==1){
						c+=" ";
					}
				}
				this.codeTitle = c.trim();
				var cornerArray = this.codeTitle.split(" ");
				for(var i=0;i<cornerArray.length;i++){
					var code = cornerArray[i];
					code = code.trim();
					if(code.length==2){
						var des = dic.getDes(code);
					}else{
						var des = dic.getDes(code+code);
					}
					this.codes.push({"code":code.toLowerCase(),"des":des});
				}
				
				for(var i = 0;i<edgeCodes.length;i++){
					var cc = edgeCodes[i].code;
					e+=cc;
					if(i%2==1){
						e+=" ";
					}
				}
				this.edgeCodeTitle = e.trim();
				var edgeArray = this.edgeCodeTitle.split(" ");
				for(var i=0;i<edgeArray.length;i++){
					var code = edgeArray[i];
					code = code.trim();
					if(code.length==2){
						var des = dic.getDes(code);
					}else{
						var des = dic.getDes(code+code);
					}
					this.edgeCodes.push({"code":code.toLowerCase(),"des":des});
				}
				
			},
			update(){
				this.bufferIndex_C = constant.getBufferIndex_C();
				this.bufferIndex_E = constant.getBufferIndex_E();
				this.cornerIsKeep = constant.getCornerIsKeep();
				this.edgeIsKeep = constant.getEdgeIsKeep();
				this.cornerLend = constant.getCornerLend();
				this.edgeLend = constant.getEdgeLend();
				this.cornerS = constant.getCornerS();
				this.edgeS = constant.getEdgeS();
			},
			onClickItem(e) {
			      if (this.current != e.currentIndex) {
			        this.current = e.currentIndex;
			      }
			    },
			trigger(e) {
				if(e.index==0){
					this.showDrawer('showRight');
				}
				if(e.index==1){
					//生成编码
					this.read();
					this.firstTime = new Date().getTime();
					this.createNumQuestion();
				}
			},
			showDrawer() {
				this.$refs["showRight"].open();
				this.isShow = false;
			},
			closeDrawer() {
				this.$refs["showRight"].close();
				this.isShow = true;
			},
			onImageError(e,index) {
				var code = this.codes[index].code;
				this.codes[index].code = "image_error";
				this.codes[index].des = code;
			},
			onImageErrorE(e,index) {
				var code = this.edgeCodes[index].code;
				this.edgeCodes[index].code = "image_error";
				this.edgeCodes[index].des = code;
			},
			submit(){
				var input = this.inputCodes.replaceAll(" ","");
				var inputE = this.inputECodes.replaceAll(" ","");
				var codeC = this.codeTitle.replaceAll(" ","");
				var codeE = this.edgeCodeTitle.replaceAll(" ","");
				if(this.current==0){
					if(input.toUpperCase()==codeC){
						this.next();
					}else{
						uni.showToast({
							title:"编码错误",
							icon:'error',
							duration:500
						})
					}
				}else if(this.current==1){
					if(inputE.toUpperCase()==codeE){
						this.next();
					}else{
						uni.showToast({
							title:"编码错误",
							icon:'error',
							duration:500
						})
					}
				}else{
					if(input.toUpperCase()==codeC&&inputE.toUpperCase()==codeE){
						this.next();
					}else{
						uni.showToast({
							title:"编码错误",
							icon:'error',
							duration:500
						})
					}
				}
				
			},
			toUpper(event){
				var value = event.target.value;
				value = value.toUpperCase();
				this.inputCodes = value;
			},
			toUpper2(event){
				var value = event.target.value;
				value = value.toUpperCase();
				this.inputECodes = value;
			},
			next(){
				var current = new Date().getTime();
				var s = (current-this.firstTime)/1000;
				this.firstTime = new Date().getTime();
				this.inputCodes = "";
				this.inputECodes="";
				this.closeDrawer();
				this.createNumQuestion();
				let that = this;
				uni.showModal({
					title: '成功',
					showCancel:false,
					content: '用时'+s.toString(),
					success: function(res) {
						if (res.confirm) {
							that.read();
						} 
						
					}
					
				})
			},
			checkNum(){
				var as1=this.question[0].answer;
				var as2=this.question[1].answer;
				var as3=this.question[2].answer;
				
				if(as1==this.answer1&&as2==this.answer2&&as3==this.answer3){
					this.showError = false;
					this.isDisable = false;
				}else{
					this.showError = true;
					this.isDisable = true;
				}
				
			},
			createNumQuestion(){
				this.answer1 = "";
				this.answer2 = "";
				this.answer3 = "";
				this.showError = false;
				this.isDisable = true;
				
				var q = [];
				
				var q1Num1 = Math.floor(Math.random() * 10);
				var q1Num2 = Math.floor(Math.random() * 10);
				var q1Num3 = Math.floor(Math.random() * 10);
				var as1 = q1Num1*q1Num2+q1Num3;
				q.push({"nums":[q1Num1,q1Num2,q1Num3],"answer":as1});
				
				var q2Num1 = Math.floor(Math.random() * 10);
				var q2Num2 = Math.floor(Math.random() * 10);
				var q2Num3 = Math.floor(Math.random() * 10);
				var as2 = q2Num1+q2Num2*q2Num3;
				q.push({"nums":[q2Num1,q2Num2,q2Num3],"answer":as2});
				
				var q3Num1 = Math.floor(Math.random() * 10);
				var q3Num2 = Math.floor(Math.random() * 10);
				var q3Num3 = Math.floor(Math.random() * 10);
				var as3 = q3Num1+q3Num2+q3Num3;
				q.push({"nums":[q3Num1,q3Num2,q3Num3],"answer":as3});
				
				// console.log(q);
				this.question = Array.from(q);
				
			}
			
		}
	}
	
</script>

<style lang="scss">
.topTab{
	background-color: white;
	height: 70rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	position: fixed;
	top: var(--window-top);
	left: 0;
	right: 0;
	z-index: 2;
}
.grid-item-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 10rpx;
}
.grid{
	padding-top: 120rpx;
}
.text{
	font-size: 26rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.image{
	width: 375rpx;
	height: 300rpx;
}
.code{
	padding-top: 80rpx;
	font-size: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 750rpx;
	height: 70rpx;
	background-color: white;
	position: fixed;
	z-index: 1;
	text{
		font-weight: bold;
		font-size: 45rpx;
	}
}
.inputCodes{
	margin-top: 20rpx;
	background-color: gainsboro;
	padding: 10rpx;
}
.content {
	flex: 1;
    display: flex;
    flex-direction: column;
}
.all{
	padding-top: 80rpx;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text{
		font-weight: bold;
		font-size: 45rpx;
	}
}
.question{
	display: flex;
	flex-direction: row;
	padding: 10rpx;
	input{
		background-color: gainsboro;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
}
.info-content{
	padding: 10rpx;
}
.error{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: red;
}
</style>
